<template>
  <div class="SysUsers">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息表</span>
      </div>
      <div class="SysUsersForm">
        <el-table
          :data="usersData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
        >
          <el-table-column label="用户ID" prop="id"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="头像" >
            <template slot-scope="scope">
              <img class="blogFace" :src="scope.row.profile" alt />
            </template>
          </el-table-column>
          <el-table-column label="身份" prop="identity"></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope>
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-dialog
                title="编辑身份"
                :visible.sync="dialogVisible"
                width="30%"
                top=20vh
                :center="true"
                :before-close="handleClose">
                <span>身份：</span>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="comfirm()">确 定</el-button>
                </span>
              </el-dialog>
              <el-button size="mini" v-show="scope.row.status == '启用'" type="danger" @click="handleDelete(scope.$index, scope.row)">禁用</el-button>
              <el-button size="mini" v-show="scope.row.status == '禁用'" type="success" @click="handleDelete(scope.$index, scope.row)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizeData"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
        </el-pagination>
      </div>
      
    </el-card>
    
  </div>
</template>

<script>
import { getUsers, delUser, identity } from "@/api/userManage";
export default {
  data() {
    return {
      currentPage1: 1,
      pageSizeData:[5,10,20,40,80],
      total:0,
      dialogVisible:false,
      options: [{
          value: '0',
          label: '超管'
        }, {
          value: '1',
          label: '管理员'
        }, {
          value: '2',
          label: '用户'
        }, {
          value: '3',
          label: '游客'
        }, {
          value: '4',
          label: '测试'
        }],
        value: '',
        userId:'',
      usersData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      search: ""
    };
  },
  methods: {
    async getUsers(data){
      await getUsers(data)
      .then(res => {
        if (res.data.code == 1000) {
          const users = res.data.users
          users.forEach(item => {
            if(item.identity == 0){
              return item.identity = '超管'
            }else if(item.identity == 1){
              return item.identity = '管理员'
            }else if(item.identity == 2){
              return item.identity = '用户'
            }else if(item.identity == 3){
              return item.identity = '游客'
            }else if(item.identity == 4){
              return item.identity = '测试'
            }else if(item.identity == -1){
              return item.identity = '站长'
            }
          });
          const userss = users
          userss.forEach(item=>{
            if(item.status == 0){
              item.status = "启用"
            }else{
              item.status = "禁用"
            }
          })
          this.usersData = userss
          this.total = res.data.total
        }
        
      })
      .catch(err => {
        this.$message({
            type: 'info',
            message: '取消改变'
          });     
      });
    },
    handleEdit(index, row) {
      this.dialogVisible = true
      this.value = row.identity
      this.userId = row.id
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    comfirm(){
        this.$confirm(`确定把身份修改为${this.value}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.dialogVisible = false
          // 发送请求   
          const data = {'id':this.$store.state.UserInfo.userInfo.id,'userId':this.userId , 'identity':this.value}
          console.log(data);
          await identity(data).then(async res=>{
            if(res.data.code == 200){
              await this.getUsers()
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
      },
    handleDelete(index, row) {
      this.$confirm('是否要改变用户状态', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const data = {'id':this.$store.state.UserInfo.userInfo.id, 'status':row.status,'userId':row.id} 
          console.log(data);
          await delUser(data).then(async res=>{
            if(res.data.code == 200){
              const data = {'pageNum':this.currentPage1,'pageSize':this.pageSizeData[0] }
              await this.getUsers(data)
            }
          }).catch(err=>{
            this.$message({
            type: 'error',
            message: err
          });    
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消改变'
          });          
        });
    },
    async handleSizeChange(val) {
        this.pageSizeData = [val,,5,10,20,40,80]
        this.currentPage1 = 1 
        const data = {'pageNum':this.currentPage1,'pageSize':val }
        await this.getUsers(data)
      },
    async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage1 = val
        const data = {'pageNum':val,'pageSize':this.pageSizeData[0]}
        await this.getUsers(data)
      }
  },
  async mounted() {
    await this.getUsers()
  }
};
</script>

<style lang="less" scoped>
.SysUsers{
  height: 80vh;
}
.SysUsersForm{
  height: 70vh;
  overflow: auto;
}
.blogFace{
  width: 40px;
  height: 40px;
}
</style>